<script>
import { convertMessageTextToRich } from '@/utils';

export default {
  props: {
    direction: {
      type: String,
      default: 'left'
    },
    type: {
      type: String,
      default: 'text'
    },
    content: {
      type: String,
      default: ''
    },
    isGroup: {
      type: Boolean,
      default: false
    }
  },
  components: {
  },
  computed: {
    richContent() {
      return convertMessageTextToRich(this.content)
    }
  },
  data() {
    return {
      duration: 0,
      playing: false,
    }
  },
  mounted() {
    if (this.type === 'voice') {
      this.$refs.audio.currentTime = 1
    }
  },
  methods: {
    async play() {
      if (this.$refs.audio.paused) {
        this.playing = true
        this.$refs.audio.currentTime = 0
        this.$refs.audio.play()
      } else {
        this.$refs.audio.pause()
        this.playing = false
      }
    },
    handleLoaded() {
      const { duration } = this.$refs.audio
      if (duration !== Infinity) {
        this.duration = duration.toFixed(0)
      }
    },
  },
}
</script>

<template>
  <div class="chat-bubble" :style="{
    justifyContent: direction === 'left' ? 'flex-start' : 'flex-end'
  }">
    <div class="chat-bubble-main" :class="`chat-bubble-main--${direction}`">
      <div v-if="type === 'text'" v-html="richContent"></div>
      <img v-if="type === 'image'" @click="$emit('preview', content)" class="chat-bubble-image" :src="content" alt="">
      <div v-if="type === 'voice'" @click="play" class="chat-bubble-voice">
        
        <div>
          {{ duration }}&Prime;
        </div>
        <div class="chat-bubble-voice-icons" :class="{
          'chat-bubble-voice-icon-animation': playing
        }">
          <svg class="chat-bubble-voice-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-1.05 0-1.775-.725Q9.5 19.55 9.5 18.5q0-1.05.725-1.775Q10.95 16 12 16q1.05 0 1.775.725q.725.725.725 1.775q0 1.05-.725 1.775Q13.05 21 12 21Z"/></svg>
          <svg class="chat-bubble-voice-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-1.05 0-1.775-.725T9.5 18.5q0-1.05.725-1.775T12 16q1.05 0 1.775.725T14.5 18.5q0 1.05-.725 1.775T12 21m0-8q-1.275 0-2.425.375t-2.1 1.025q-.5.35-1.125.325t-1.05-.45q-.425-.45-.425-1.062t.5-.988q1.375-1.05 3.063-1.638T12 10q1.875 0 3.563.6t3.062 1.65q.5.375.513.988T18.7 14.3q-.425.425-1.05.438t-1.125-.338q-.95-.65-2.1-1.025T12 13"/></svg>
          <svg class="chat-bubble-voice-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 21q-1.05 0-1.775-.725T9.5 18.5q0-1.05.725-1.775T12 16q1.05 0 1.775.725T14.5 18.5q0 1.05-.725 1.775T12 21m0-11q1.875 0 3.563.6t3.062 1.65q.5.375.513.988T18.7 14.3q-.425.425-1.05.438t-1.125-.338q-.95-.65-2.1-1.025T12 13q-1.275 0-2.425.375t-2.1 1.025q-.5.35-1.125.325t-1.05-.45q-.425-.45-.425-1.062t.5-.988q1.375-1.05 3.063-1.638T12 10m0-6q3.125 0 5.888 1.025t4.962 2.9q.5.425.525 1.05t-.425 1.075q-.425.425-1.05.438t-1.125-.388q-1.8-1.475-4.037-2.287T12 7q-2.5 0-4.737.813T3.225 10.1q-.5.4-1.125.388t-1.05-.438Q.6 9.6.625 8.975t.525-1.05q2.2-1.875 4.963-2.9T12 4"/></svg>
        </div>
        <audio ref="audio" preload="metadata" @durationchange="handleLoaded" @loadedmetadata="handleLoaded" @ended="playing = false">
          <source :src="content" type="audio/x-wav">
        </audio>
      </div>
      <svg class="chat-bubble-arrow" :class="[`chat-bubble-arrow--${direction}`, { group: isGroup }]" xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24">
        <path fill="currentColor"
          d="m4.431 12.822l13 9A1 1 0 0 0 19 21V3a1 1 0 0 0-1.569-.823l-13 9a1.003 1.003 0 0 0 0 1.645" />
      </svg>
    </div>
  </div>
</template>

<style lang="less" scoped>
.chat-bubble {
  display: flex;
}

.chat-bubble-main {
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, .1);
  display: inline-block;
  min-height: 40px;
  box-sizing: border-box;
  padding: 15px;
  position: relative;
  word-break: break-all;

  &--left {
    background-color: white;
    .chat-bubble-voice {
      justify-content: flex-start;
      flex-direction: row-reverse;
    }

    .chat-bubble-voice-icon {
      transform: rotate(90deg);
    }
  }

  &--right {
    margin-left: auto;
    background-color: #63c178;
    text-align: right;

    .chat-bubble-voice {
      justify-content: flex-end;
    }

    .chat-bubble-voice-icons {
      transform: rotate(-90deg);
    }
  }

  .chat-bubble-voice {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .chat-bubble-voice-icons {
    width: 20px;
    height: 20px;
    position: relative;
  }

  @duration: 0.8s;
  .chat-bubble-voice-icon-animation {
    .chat-bubble-voice-icon {
      opacity: 0;
      animation: playing @duration infinite;
    }
  }
  
  .chat-bubble-voice-icon {
    width: 20px;
    height: 20px;
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;

    &:nth-child(2) {
      animation-delay: calc(@duration / 3);
    }

    &:nth-child(3) {
      animation-delay: calc(@duration / 3 * 2);
    }
  }

  @keyframes playing {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
  }

  .chat-bubble-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 24px;
  }

  .chat-bubble-arrow {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    
    &--left {
      left: 0;
      color: white;
      transform: translate3d(calc(-50% + 1px), -50%, 0);
    }

    &--left.group {
      top: 0%;
      transform: translate3d(-40%, 30%, 0) rotate(30deg);
    }

    &--right {
      right: 0;
      color: #63c178;
      transform: translate3d(calc(50% - 1px), -50%, 0) rotateY(180deg);
    }

    &--right.group {
      top: 0%;
      transform: translate3d(40%, 30%, 0) rotateY(180deg) rotate(30deg);
    }
  }
}
</style>
